<!-- directive:title uib-dropdown -->
<!-- directive:breadcrumb uib-dropdown -->
<div class='panel-body'>
    <div class="row">
        <div class="col-sm-6">
            <p>Simple dropdown</p>
            <span uib-dropdown on-toggle="toggled(open)">
                <a href id="simple-dropdown" uib-dropdown-toggle> Click me for a dropdown, yo! </a>
                <ul class="dropdown-menu" uib-dropdown-menu aria-labelledby="simple-dropdown">
                    <li ng-repeat="choice in items"> <a href>{{choice}}</a> </li>
                </ul>
            </span>
            <hr />
            <p>
                <button type="button" class="btn btn-default btn-sm" ng-click="toggleDropdown($event)">Toggle button dropdown</button>
                <button type="button" class="btn btn-warning btn-sm" ng-click="disabled = !disabled">Enable/Disable</button>
            </p>
            <hr />
            <p>Single button</p>
            <div class="btn-group" uib-dropdown is-open="status.isopen">
                <button id="single-button" type="button" class="btn btn-primary" uib-dropdown-toggle ng-disabled="disabled">
                    Button dropdown <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="single-button">
                    <li role="menuitem"><a href="#">Action</a></li>
                    <li role="menuitem"><a href="#">Another action</a></li>
                    <li role="menuitem"><a href="#">Something else here</a></li>
                    <li class="divider"></li>
                    <li role="menuitem"><a href="#">Separated link</a></li>
                </ul>
            </div>
            <hr />
            <p>Split button</p>
            <div class="btn-group" uib-dropdown uib-dropdown-hover>
                <button id="split-button" type="button" class="btn btn-danger">Action</button>
                <button type="button" class="btn btn-danger" uib-dropdown-toggle>
                    <span class="caret"></span>
                    <span class="sr-only">Split button!</span>
                </button>
                <ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="split-button">
                    <li role="menuitem"><a href="#">Action</a></li>
                    <li role="menuitem"><a href="#">Another action</a></li>
                    <li role="menuitem"><a href="#">Something else here</a></li>
                    <li class="divider"></li>
                    <li role="menuitem"><a href="#">Separated link</a></li>
                </ul>
            </div>
            <hr />
            <p>Single button using append-to-body</p>
            <div class="btn-group" uib-dropdown dropdown-append-to-body>
                <button id="btn-append-to-body" type="button" class="btn btn-primary" uib-dropdown-toggle>
                    Dropdown on Body <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="btn-append-to-body">
                    <li role="menuitem"><a href="#">Action</a></li>
                    <li role="menuitem"><a href="#">Another action</a></li>
                    <li role="menuitem"><a href="#">Something else here</a></li>
                    <li class="divider"></li>
                    <li role="menuitem"><a href="#">Separated link</a></li>
                </ul>
            </div>
            <hr />
            <p>Single button using template-url</p>
            <div class="btn-group" uib-dropdown>
                <button id="button-template-url" type="button" class="btn btn-primary" uib-dropdown-toggle ng-disabled="disabled">
                    Dropdown using template <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" uib-dropdown-menu template-url="dropdown.html" aria-labelledby="button-template-url">
                </ul>
            </div>
            <script type="text/ng-template" id="dropdown.html" ui-bs>
                <ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="button-template-url">
                  <li role="menuitem"><a href="#">Action in Template</a></li>
                  <li role="menuitem"><a href="#">Another action in Template</a></li>
                  <li role="menuitem"><a href="#">Something else here</a></li>
                  <li class="divider"></li>
                  <li role="menuitem"><a href="#">Separated link in Template</a></li>
                </ul>
            </script>
            <hr />
            <p>Single button with keyboard nav</p>
            <div class="btn-group" uib-dropdown keyboard-nav>
                <button id="simple-btn-keyboard-nav" type="button" class="btn btn-primary" uib-dropdown-toggle>
                    Dropdown with keyboard navigation <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="simple-btn-keyboard-nav">
                    <li role="menuitem"><a href="#">Action</a></li>
                    <li role="menuitem"><a href="#">Another action</a></li>
                    <li role="menuitem"><a href="#">Something else here</a></li>
                    <li class="divider"></li>
                    <li role="menuitem"><a href="#">Separated link</a></li>
                </ul>
            </div>
            <hr />
            <p>append-to vs. append-to-body vs. inline example</p>
            <div class="btn-group" uib-dropdown keyboard-nav dropdown-append-to="appendToEl">
                <button id="btn-append-to" type="button" class="btn btn-primary" uib-dropdown-toggle>
                    Dropdown in Container <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="btn-append-to">
                    <li role="menuitem"><a href="#">Action</a></li>
                    <li role="menuitem"><a href="#">Another action</a></li>
                    <li role="menuitem"><a href="#">Something else here</a></li>
                    <li class="divider"></li>
                    <li role="menuitem"><a href="#">Separated link</a></li>
                </ul>
            </div>
            <div class="btn-group" uib-dropdown dropdown-append-to-body>
                <button id="btn-append-to-to-body" type="button" class="btn btn-primary" uib-dropdown-toggle>
                    Dropdown on Body <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="btn-append-to-to-body">
                    <li role="menuitem"><a href="#">Action</a></li>
                    <li role="menuitem"><a href="#">Another action</a></li>
                    <li role="menuitem"><a href="#">Something else here</a></li>
                    <li class="divider"></li>
                    <li role="menuitem"><a href="#">Separated link</a></li>
                </ul>
            </div>
            <div class="btn-group" uib-dropdown>
                <button id="btn-append-to-single-button" type="button" class="btn btn-primary" uib-dropdown-toggle>
                    Inline Dropdown <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="btn-append-to-single-button">
                    <li role="menuitem"><a href="#">Action</a></li>
                    <li role="menuitem"><a href="#">Another action</a></li>
                    <li role="menuitem"><a href="#">Something else here</a></li>
                    <li class="divider"></li>
                    <li role="menuitem"><a href="#">Separated link</a></li>
                </ul>
            </div>
        </div>
        <div class="col-sm-6">
            <style type="text/css" ui-bs>
                [uib-dropdown-hover]:hover>.dropdown-menu { display: block; }
                .dropdown-menu { margin-top: -1px; }
            </style>
            <script type="text/xianjs" ui-bs>
                <span uib-dropdown on-toggle="toggled(open)">
                    <a href="javascript:;" uib-dropdown-toggle > 下拉框Demo </a>
                    <ul class="dropdown-menu" role="menu">
                        <li ng-repeat="choice in items"> <a href>{{choice}}</a> </li>
                    </ul>
                </span>
                <div class="btn-group" uib-dropdown is-open="status.isopen">
                    <button type="button" class="btn btn-primary" uib-dropdown-toggle ng-disabled="disabled">
                        下拉框Demo <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" role="menu">
                        <li><a href>Action</a></li>
                        <li><a href>Another action</a></li>
                        <li><a href>Something else here</a></li>
                        <li class="divider"></li>
                        <li><a href>Separated link</a></li>
                    </ul>
                </div>
                <div class="btn-group" uib-dropdown>
                    <button type="button" class="btn btn-danger">下拉框Demo</button>
                    <button type="button" class="btn btn-danger dropdown-toggle" uib-dropdown-toggle>
                        <span class="caret"></span>
                        <span class="sr-only">Split button!</span>
                    </button>
                    <ul class="dropdown-menu" role="menu">
                        <li><a href>Action</a></li>
                        <li><a href>Another action</a></li>
                        <li><a href>Something else here</a></li>
                        <li class="divider"></li>
                        <li><a href>Separated link</a></li>
                    </ul>
                </div>
            </script>
        </div>
    </div>
    <p>uib-dropdown的属性有</p>
    <table class="table" > <tbody> <tr> <td> <p><span>属性名</span></p> </td> <td> <p><span>默认值</span></p> </td> <td> <p><span>备注</span></p> </td> </tr> <tr> <td> <p><span>auto-close</span></p> </td> <td> <p><span>always</span></p> </td> <td> <p><span>可设置的值有三个：</span></p> <p><span>1 always，点击菜单后自动关闭</span></p> <p><span>2 disabled，不自动关闭，使用is-open手动控制。</span></p> <p><span>3 outsideClick，点击Dropdown外部的元素时关闭。</span></p> </td> </tr> <tr> <td> <p><span>dropdown-append-to</span></p> </td> <td> <p><span>null</span></p> </td> <td> <p><span>将菜单项（ul部分）放在其他DOM元素中，而不是包含在uib-dropdown所在的元素中</span></p> </td> </tr> <tr> <td> <p><span>dropdown-append-to-body</span></p> </td> <td> <p><span>false</span></p> </td> <td> <p><span>将菜单项（ul部分）放在body末尾，而不是包含在uib-dropdown所在的元素中</span></p> </td> </tr> <tr> <td> <p><span>is-open</span></p> </td> <td> <p><span>false</span></p> </td> <td> <p><span>菜单是否展开。uib-dropdown-toggle所在的元素点击时会更改这个值。</span></p> </td> </tr> <tr> <td> <p><span>keyboard-nav</span></p> </td> <td> <p><span>false</span></p> </td> <td> <p><span>是否允许方向键选择菜单</span></p> </td> </tr> <tr> <td> <p><span>on-toggle</span></p> </td> <td> <p><span>&nbsp;</span></p> </td> <td> <p><span>菜单展开或收起时触发的方法</span></p> </td> </tr> </tbody> </table>
    <hr />
    <div class="skin_pop_inner account_message_box_inner">
        <div class="account_message_box_hd global_mod float_layout">
            <div class="global_info">通知</div>
            <div class="global_extra"><a class="js_clear_all" href="javascript:void(0);">全部已读</a></div>
        </div>
        <div class="account_message_box_bd">
            <ul class="account_message_list js_message_list">
                <li class="account_message_item">
                    <div class="account_message_global">
                        <div class="account_message_title"><a href=" ">同主体公众号快速注册小程序通知</a></div>
                    </div>
                    <div class="account_message_desc">
                        <p class="js_go2notify" href=" ">当前帐号主体【云袭智慧在线科技发展(北京)有限公司】通过公众号【云袭智慧】快速注册流程注册了小程序。具体信息如下：<br><br>发起注册的公众号名称：云袭智慧（原始ID：gh_244e15b4af37）<br>小程序注册邮箱：zhaoy****nxi.cn（原始ID：gh_92574958b185）<br>操作者微信号：Hu****tun<br>注册时间：2018年12月5日15时20分<br><br>如有疑问，请联系公众号管理员确认。点击了解更多：<a href=" " class="js_go2notify_link" target="_blank">复用公众号资质快速注册小程序说明</a></p>
                    </div>
                    <div class="account_message_info">2018-12-05</div>
                </li>
                <li class="account_message_item">
                    <div class="account_message_global">
                        <div class="account_message_title"><a href="/wxopen/wasysnotify?action=list&amp;selectid=441514525&amp;token=1168829670&amp;lang=zh_CN">小程序认证成功</a></div>
                    </div>
                    <div class="account_message_desc">
                        <p class="js_go2notify" href=" ">小程序已通过复用公众号资质完成微信认证。<br> 公众号名称：云袭智慧<br>     认证通过时间：2018-12-05<br> 认证过期日期：2019-09-04</p>
                    </div>
                     <div class="account_message_info">2018-12-05</div>
                </li>
            </ul>
            <div class="dot_loading account_message_loading js_loading" style="display:none;">
                <i class="icon_dot_loading_left icon_dot_loading"></i>
                <i class="icon_dot_loading_center icon_dot_loading"></i>
                <i class="icon_dot_loading_right icon_dot_loading"></i>
            </div>
        </div>
        <div class="skin_pop_ft account_message_box_ft">
            <a href=" ">前往通知中心</a>
        </div>
    </div>
    <style type="text/css" ui-bs>
        .skin_pop .skin_pop_inner { border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; box-shadow: 0 0 20px #e4e8eb; -moz-box-shadow: 0 0 20px #e4e8eb; -webkit-box-shadow: 0 0 20px #e4e8eb; background-color: #fff; }
        .account_message_box_inner { overflow: hidden; font-size: 14px; }
        .account_message_box_hd { line-height: 49px; padding: 0 15px; border-bottom: 1px solid #e7e7eb; }
        .global_mod.float_layout .global_info { float: left; }
        .account_message_box_hd .global_info { font-size: 16px; }
        .global_mod .global_extra { text-align: right; }
        .account_message_box_hd a { color: #576b95; }
        .account_message_box_bd { padding: 0 15px; max-height: 300px; overflow-y: auto; }
        .account_message_list { width: 360px; }
        .account_message_item:first-child { border-top-width: 0; }
        .account_message_item { padding: .8em 0; border-top: 1px solid #e7e7eb; }
        .account_message_title { width: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-wrap: normal; }
        .head_box a { color: #353535; cursor: pointer; }
        .account_message_desc { padding-top: .2em; cursor: pointer; }
        .account_message_desc, .account_message_info { color: #9a9a9a; word-wrap: break-word; word-break: break-all; }
        .dot_loading { padding: 9px 0; text-align: center; }
        .account_message_loading { border-top: 1px solid #e7e7eb; }
        .icon_dot_loading { width: 7px; height: 7px; background-color: #c2c2c2; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; display: inline-block; vertical-align: middle; margin: 0 4px; -webkit-animation-duration: 1.7s; animation-duration: 1.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; }
    </style>
</div>

